<template>
	<uni-card v-if="orderInfo" style="padding: 20px;border-radius: 30px;">
		<uni-row>
			<uni-col :span="4">
				<image style="height: 120px;width: 100px;" :src="orderInfo.movieOrder.movieImage"></image>
			</uni-col>
			<uni-col :span="20" style="padding: 25px;">
				<p style="padding: 10px;">
					<span style="font-size: 30px;font-weight: bold;">{{orderInfo.movieOrder.movieName}}</span>
				</p>
				<p>
					<span
						style="padding: 10px;font-size: 20px;font-weight: bold;">{{utils.moment(orderInfo.movieSession.startTime).format('HH:mm')}}
						-
						{{utils.moment(orderInfo.movieSession.endTime).format('HH:mm')}}
					</span>
					<span style="font-size: 20px;">
						&nbsp;&nbsp; {{utils.moment(orderInfo.movieSession.startTime).format('MM/DD')}}
					</span>
				</p>

			</uni-col>
		</uni-row>
	</uni-card>
	<uni-card v-if="orderInfo" style="padding: 20px;border-radius: 30px;">
		<uni-row>
			<uni-col :span="24" style="margin-top: 10px;margin-bottom: 30px;">
				<span style="font-size: 30px;font-weight: bold;"> 电影评分</span>
			</uni-col>
			<uni-col :span="18">
				<uni-rate v-model="value"/>
			</uni-col>
			<uni-col :span="6" style="text-align: right;">
				<button size="mini" type="primary" v-show="value!=0" @click="clickRate" style="border-radius: 100px;">
					<uni-icons type="checkmarkempty" color="white"></uni-icons>
				</button>
			</uni-col>
			
		</uni-row>
	</uni-card>
	<uni-card v-if="orderInfo" style="padding: 20px;border-radius: 30px;">
		<uni-row style="font-size: 20px;">
			<uni-col :span="24" style="margin-top: 10px;">
				<span style="font-size: 30px;font-weight: bold;"> 订单信息</span>
			</uni-col>
			<uni-col :span="24" style="margin-top: 30px;">
				<uni-row>
					<uni-col :span="12"><span> 订 单 号</span></uni-col>
					<uni-col :span="12" style="font-weight: bold;text-align: right;">{{orderInfo.movieOrder.id}}
					</uni-col>
				</uni-row>

			</uni-col>
			<uni-col :span="24" style="margin-top: 10px;">
				<uni-row>
					<uni-col :span="12"><span style="font-size: 20px;"> 创建时间</span></uni-col>
					<uni-col :span="12" style="font-weight: bold;text-align: right;">
						{{utils.moment(orderInfo.movieOrder.createAt).format('YYYY年MM月DD日HH:mm')}}
					</uni-col>
				</uni-row>

			</uni-col>
		</uni-row>
	</uni-card>
	<uni-card v-if="orderInfo" style="padding: 20px;border-radius: 30px;">
		<uni-row style="font-size: 20px;">
			<uni-col :span="24" style="margin-top: 10px;">

				<uni-row>
					<uni-col :span="12"> <span style="font-size: 30px;font-weight: bold;"> 实付金额</span></uni-col>
					<uni-col :span="12" style="font-weight: bold;text-align: right;font-size: 30px;">
						￥{{orderInfo.movieOrder.totalPrice}}</uni-col>
				</uni-row>
			</uni-col>
			<uni-col :span="24" style="margin-top: 30px;">
				<uni-row>
					<uni-col :span="12"><span> 影票原价</span></uni-col>
					<uni-col :span="12" style="font-weight: bold;text-align: right;">
						￥{{orderInfo.movieOrder.totalPrice}}</uni-col>
				</uni-row>

			</uni-col>
			<uni-col :span="24" style="margin-top: 10px;">
				<uni-row>
					<uni-col :span="12"><span style="font-size: 20px;"> 优惠金额</span></uni-col>
					<uni-col :span="12" style="font-weight: bold;text-align: right;">
						￥0</uni-col>
				</uni-row>
			</uni-col>
			<uni-col :span="24" style="margin-top: 10px;">
				<uni-row>
					<uni-col :span="12"><span style="font-size: 20px;"> 影票实付</span></uni-col>
					<uni-col :span="12" style="font-weight: bold;text-align: right;">
						￥{{orderInfo.movieOrder.totalPrice}}</uni-col>
				</uni-row>
			</uni-col>
		</uni-row>
	</uni-card>
	<uni-card v-if="orderInfo" style="padding: 20px;border-radius: 30px;">
		<uni-row style="font-size: 20px;">
			<p style="font-size: 30px;font-weight: bold;margin-bottom: 30px;"> 观影须知</p>
			<p style="text-align: center;color: red;font-weight: bold;">
				——疫情期间，观影需全程佩戴口罩，影厅内禁止饮食——
			</p>
			<p>1.电影开映前30分钟以内或已取票的情况下，不支持退票</p>
			<p>2.如卖品和影票一起购买成功后，仅支持整单退款，不支持卖品单独退款。</p>
		</uni-row>
	</uni-card>
</template>

<script lang="ts" setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import api from '../../../api/api'
	import utils from '../../../utils'

	const props = defineProps()
	const orderId = ref()
	const orderInfo = ref()
	const value =ref(0)


	onMounted(() => {
		orderId.value = props.orderId
		getOrderInfo()
	})
	const getOrderInfo = () => {
		api.order.getMovieOrderById({
			orderId: orderId.value
		}).then(res => {
			if (res.data.code == 0) {
				orderInfo.value = res.data.data.info
			}
		})
	}
	const clickRate=()=>{
		uni.showToast({
			title:'评分成功'
		})
	}
</script>

<style>
</style>
